/* vue */
import { defineComponent } from "vue"
/* hooks */
import { useDialog } from "@hooks/useDialog"
/* utils */
import { isFalsy } from "@src/util/type"
import { formatDate, FormatTemplate } from "pub-bbx-utils"
import { openAccurateTab } from "@src/util/platform"
/* service */
import { isTenantTypeMultiClient } from "@service/TenantService"
/* model */
import { PageRoutesTypeEnum } from "pub-bbx-global/pageType/dist/enum/PageRoutesEnum"
import StorageKeyEnum from '@model/enum/StorageKeyEnum'

enum OffSiteLoginDialogContentEventEnum {
  openUserView = 'openUserView'
}

export default defineComponent({
  name: "OffSiteLoginDialogContent",
  props: {
    accountNumber: {
      type: String,
      default: ''
    },
    loginTime: {
      type: Number
    },
    loginCity: {
      type: String,
      default: ''
    },
    loginIP: {
      type: String,
      default: ''
    },
    loginMethod: {
      type: String,
      default: ''
    },
    loginStatus: {
      type: String,
      default: ''
    },
    tenantType: {
      type: Number
    },
    userId: {
      type: String,
      default: ''
    },
    onOpenUserView: {
      type: Function
    }
  },
  data() {
    return {
    }
  },
  computed: {
    /**
     * @description 头部内容标题 - 您的账号
     */
    headerLeftText() {
      return '您的账号'
    },
    /**
     * @description 头部右侧内容 - 近期发生一次异常登录，请核实以下详情：
     */
    headerRightText() {
      return '近期发生一次异常登录，请核实以下详情：'
    },
    /**
     * @description 登录时间
     */
    loginTimeText() {
      return '登录时间'
    },
    /**
     * @description 登录城市
     */
    loginCityText() {
      return '登录城市'
    },
    /**
     * @description 登录方式
     */
    loginMethodText() {
      return '登录方式'
    },
    /**
     * @description 登录状态
     */
    loginStatusText() {
      return '登录状态'
    },
    /**
     * @description 登录状态值
     */
    loginStatusValue() {
      return '成功'
    },
    /**
     * @description 文字 - 仅参考
     */
    referenceText() {
      return '(仅参考)'
    },
    /**
     * @description 修改密码提示
     * 如判断账号有风险，请及时修改您的密码。为增强账号安全，建议您前往PC版 进入头像－个人中心－修改密码。
     */
    modifyPasswordTipText() {
      return '如判断账号有风险，请及时修改您的密码。为增强账号安全，建议您前往PC版 进入头像－个人中心－'
    },
    /**
     * @description 修改密码按钮
     */
    modifyPasswordButtonText() {
      return '修改密码'
    },
    /**
     * @description 安全消息提示
     */
    safetyMessageTip() {
      return '关注账号安全，可以访问PC版系统右上角消息中心，查询近期登录信息。'
    }
  },
  methods: {
    /**
     * @description 打开个人中心
     */
    openUserView () {
      
      // 打开个人中心
      openAccurateTab({
        type: PageRoutesTypeEnum.PageMineView,
        key: this.userId,
        fromId: ''
      })
      
      // 通知父组件关闭弹窗
      this.$emit(OffSiteLoginDialogContentEventEnum.openUserView)
      // 设置 sessionStorage 用于打开个人中心时，打开修改密码弹窗
      sessionStorage.setItem(StorageKeyEnum.PersonalCenterModifyPassword, String(true))
    },
    /**
     * @description 渲染账号
    */
    renderAccount() {
      
      if (isFalsy(this.accountNumber)) {
        return null
      }
      
      return (
        <div class="off-site-login-dialog-content-account">
          { this.accountNumber }
        </div>
      )
    },
    /**
     * @description 渲染头部
    */
    renderHeader() {
      return (
        <div class="off-site-login-dialog-content-header">
          <div class="off-site-login-dialog-content-header-left">
            { this.headerLeftText }
          </div>
          { this.renderAccount() }
          <div class="off-site-login-dialog-content-header-right">
            { this.headerRightText }
          </div>
        </div>
      )
    },
    /**
     * @description 渲染登录信息
     */
    renderOffSiteLoginInfo() {
      return (
        <div class="off-site-login-dialog-content-info">
          { this.renderOffSiteLoginInfoTime() }
          { this.renderOffSiteLoginInfoCity() }
          { this.renderOffSiteLoginInfoMethod() }
          { this.renderOffSiteLoginInfoStatus() }
        </div>
      )
    },
    /**
     * @description 渲染登录信息项
     * @param label 标题
     * @param value 内容
     */
    renderOffSiteLoginInfoItem(label: string, value: string) {
      return (
        <div class="off-site-login-dialog-content-info-item">
          <div class="off-site-login-dialog-content-info-item-title">
            { label }:
          </div>
          <div class="off-site-login-dialog-content-info-item-content">
            { value }
          </div>
        </div>
      )
    },
    /**
     * @description 渲染登录时间
     * @example 2021-08-12 15:30:00
     */
    renderOffSiteLoginInfoTime() {
      const formatTime = formatDate(this.loginTime, FormatTemplate.dateTime) as string
      const label = this.loginTimeText
      return this.renderOffSiteLoginInfoItem(label, formatTime)
    },
    /**
     * @description 渲染登录城市
     * @example 中国-山东省-淄博市(仅参考)(IP:223.104.196.53)
     */
    renderOffSiteLoginInfoCity() {
      const label = this.loginCityText
      const city = this.loginCity
      const reference = this.referenceText
      const ip = this.loginIP
      const ipText = ip ? `(IP:${ip})` : ''
      
      const fullContent = `${city}${reference}${ipText}`
      
      return this.renderOffSiteLoginInfoItem(label, fullContent)
    },
    /**
     * @description 渲染登录方式
     * @example PC电脑端
     */
    renderOffSiteLoginInfoMethod() {
      const label = this.loginMethodText
      const method = this.loginMethod
      return this.renderOffSiteLoginInfoItem(label, method)
    },
    /**
     * @description 渲染登录状态
     * @example 成功
     */
    renderOffSiteLoginInfoStatus() {
      const label = this.loginStatusText
      const status = this.loginStatusValue
      return this.renderOffSiteLoginInfoItem(label, status)
    },
    /**
     * @description 渲染底部
     */
    renderFooter() {
      return (
        <div class="off-site-login-dialog-content-footer">
          { this.renderModifyPasswordTip() }
          { this.renderOffSiteLoginSafetyMessageTip() }
        </div>
      )
    },
    /**
     * @description 渲染修改密码提示
     */
    renderModifyPasswordTip() {
      // 是否独立端-自建租户
      const isMultiClient = isTenantTypeMultiClient(this.tenantType)
      // 非独立端-自建租户，不显示修改密码提示
      if (isFalsy(isMultiClient)) {
        return null
      }
      
      return (
        <div class="off-site-login-dialog-content-modify-password-tip">
          { this.modifyPasswordTipText }
          { this.renderModifyPasswordButton() }
          。
        </div>
      )
    },
    /**
     * @description 渲染修改密码按钮
     */
    renderModifyPasswordButton() {
      return (
        <el-button 
          class="off-site-login-dialog-content-modify-password-button"
          type="text"
          onClick={this.openUserView}
        >
          { this.modifyPasswordButtonText }
        </el-button>
      )
    },
    /**
     * @description 渲染安全消息提示
     */
    renderOffSiteLoginSafetyMessageTip() {
      return (
        <div class="off-site-login-dialog-content-safety-message-tip">
          { this.safetyMessageTip }
        </div>
      )
    }
  },
  render() {
    return (
     <div>
        { this.renderHeader() }
        { this.renderOffSiteLoginInfo() }
        { this.renderFooter() }
     </div>
    )
  }
})